<template>
  <div class="user">
    <div class="handle">
      <el-table
        v-loading = "isLoading"
        :data="CouponsList"
        style="width: 100%">
        <el-table-column
          prop="createTime"
          label="创建时间"
          :formatter="carTimeFilter"
        >
        </el-table-column>
        <el-table-column
        label="客服人员"
        prop="name"
        ></el-table-column>
        <el-table-column
          label="二维码"
        >
          <template slot-scope="scope">
            <el-image :src="scope.row.img" style="width: 80px;height: 80px"></el-image>
          </template>
        </el-table-column>
        <el-table-column
        label="操作"
        >
          <template slot-scope="scope">
            <el-button @click="dialogVisibleValue(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="客服资料修改"
        :visible.sync="dialogVisible"
        width="30%">
        <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="客服名称" prop="name">
            <el-input  v-model="param.name" placeholder="请输入客服名称"></el-input>
          </el-form-item>
          <el-form-item label="二维码上传" prop="name">
            <el-upload
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :before-upload="beforUpload">
              <img v-if="src" :src="src" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisibleStatus">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import {getCustomerList, updateCustomer} from "@/api/Customer";
import moment from "moment";

export default {
  name: "index",
  data(){
    return{
      isLoading:true,
      CouponsList:{},
      dialogVisible:false,
      // 临时显示地址
      src:"",
      param:{}
    }
  },
  async created() {
    await this.getCoupons()
  },
  methods:{
    // 日期格式化
    carTimeFilter(row, column, cellValue, index) {
      const dateTime = row[column.property]
      if(dateTime !=null){
        return moment(dateTime).format("YYYY-MM-DD")
      }
    },
    // 客服信息获取
    async getCoupons(){
      this.isLoading = true
      const res = await getCustomerList()
      if (res.code !== 200){
        this.$message({
          type: "error",
          message:"数据获取失败",
          showClose: true,
          duration: 1500
        })
        this.isLoading = false
        return
      }
      this.CouponsList = res.data
      this.isLoading = false
    },
    // 信息上传
    async dialogVisibleStatus(){
      console.log(this.param)
      // 修改
      updateCustomer(this.param).then(res=>{
        console.log(res)
      })
      this.dialogVisible = !this.dialogVisible;
    },
    // 对应的数据
    dialogVisibleValue(row){
      this.dialogVisible = !this.dialogVisible;
      this.param.id = row.id
    },
    // 头像上传
    beforUpload(file){
      console.log(file);
      //创建临时的路径来展示图片
      let windowURL = window.URL || window.webkitURL;
      this.src = windowURL.createObjectURL(file);
      this.param.img = file;
      return false;
    }
  }
}
</script>

<style scoped>
.user {
  padding: 10px;
  min-height: 100vh;
}
.handle{
  background-color: white;
  margin-top: 10px;
  padding: 30px 10px 10px 10px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 50px;
  height: 50px;
  display: block;
}
</style>
